import React from 'react';
import ReactDOM from 'react-dom';

import { createHashHistory } from 'History';
import { Router, Route, useRouterHistory } from 'react-router';

import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';

import { Provider } from 'mobx-react';

const routingStore = new RouterStore();

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/'
});

import weaDemofactory from 'weaDemofactory';
const weaDemofactoryStore = weaDemofactory.store;
const weaDemofactoryRoute = weaDemofactory.Route;

const history = syncHistoryWithStore(browserHistory, routingStore);
window.weaHistory = history;

let store = {
  routing: routingStore,
  ...weaDemofactoryStore,
}

const Home = props => props.children;

class Root extends React.Component {

  render() {
    return (
      <Provider {...store}>
        <Router history={history}>
          <Route name="main" breadcrumbName="入口" path="main" component={Home}>
            {weaDemofactoryRoute}
          </Route>
        </Router>
      </Provider>
    )
  }
}

ReactDOM.render(<Root />, document.getElementById('container'));